import React, { useState } from 'react'
import {
  HomeOutlined,
  UploadOutlined
} from '@ant-design/icons';
import './Managementservice.scss'
import { Select, Input, Radio, Button, Cascader, DatePicker, Upload } from 'antd';

export default function Managementservice() {

  const [value1, setvalue1] = useState(1)
  const [value2, setvalue2] = useState(1)

  const change1 = (e) => {
    console.log(e.target.value);
    setvalue1(e.target.value)
  }

  const change2 = (e) => {
    console.log(e.target.value);
    setvalue2(e.target.value)
  }

  return (
    <div className='Managementservice'>

      <div className='Managementservices'>
        <div className='icon'>
          <HomeOutlined className='home' />
          <p> 首页 / 设置  /  系统费率配置</p>
        </div>
      </div>

      <div className='Managementservice-body'>
        <div className='Managementservice-body-list'>
          管理服务费参数
        </div>

        <div className='Managementservice-body-content'>
          <label className='Managementservice-body-inp'> <span >宽限日：</span ><Select placeholder="请选择时间" style={{ width: 240 }} defaultValue={0}>
            <Select.Option>0</Select.Option>
            <Select.Option>1</Select.Option>
            <Select.Option >2</Select.Option>
            <Select.Option >3</Select.Option>
            <Select.Option >4</Select.Option>
            <Select.Option >5</Select.Option>
            <Select.Option >6</Select.Option>
            <Select.Option >7</Select.Option>
          </Select> 单位：天</label><div className='biezhu'>宽限日是指贷款逾期之后，允许用户还款的宽限日；
            设置启用后，用户在宽限日期限还款，不记录逾期行为。</div>


          <label className='Managementservice-body-inp'> <span >借款服务费：</span > <Radio.Group defaultValue={1} onChange={change1}>
            <Radio value={1} defaultChecked>启用</Radio>
            <Radio value={2}>关闭</Radio>
          </Radio.Group>
            <br />
            <Input disabled={value1 === 2 ? true : false} /> % </label><div className='biezhu'>服务费将按照借款人的信用等级来收取，一次性向借款人收取其（借款本金*服务费率）作为平台服务费</div>

          <label className='Managementservice-body-inp'> <span >借款管理费：</span > <Radio.Group defaultValue={1} onChange={change2}>
            <Radio value={1} defaultChecked>启用</Radio>
            <Radio value={2}>关闭</Radio>
          </Radio.Group>
            <br />
            <Input disabled={value2 === 2 ? true : false} /> % </label><div className='biezhu'>设置后将按照借款人的借款期限，每月向借款人收取其借款本金的0.3%作为借款管理费。</div>


            <Button  type="primary" className='Managementservice-body-btn'>
              提交
            </Button>


        </div>

      </div>

    </div>
  )
}
